<template>
    <section class="watchSection">
        <layout :isVertical="true">
            <common-toolbar text="影院故障监控">
                <el-button class="btn commonButton" type="default" @click="getShanxuan">筛选</el-button>
                <el-button class="btn commonButton" v-if="!onlyShowError" type="default" @click="searchErrorList">仅查看未解决数据</el-button>
                <el-button class="btn commonButton" v-if="onlyShowError" type="default"  @click="searchAllList">查看全部数据</el-button>
            </common-toolbar>
             <div>
                <formData ref="componentChild" :conmonDisabled="conmonDisabled" :list="list" :listData='listData' @condition="condition" @conmonDisabledNone="conmonDisabledNone"></formData>
            </div>
            <div>
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="设备故障" name="first"></el-tab-pane>
                    <el-tab-pane label="TMS故障" name="second"></el-tab-pane>
                </el-tabs>
                <!-- <el-button type="primary" round>设备故障</el-button>
                <el-button type="primary" round>TMS报障</el-button> -->
            </div>
            <layout layout="center"  class="centerSection noScrollSection">
                <div v-if="activeName == 'first'">
                <el-table
                        :data="data"
                        v-loading.iTable="loading"
                        :stripe="true"
                        ref="mutipleTable"
                        :height="height"
                        :highlight-current-row="true"
                        border
                        :tree-props="{children: 'children'}"
                        row-key="id"
                        header-row-class-name="tableHeader"
                        tooltip-effect="dark"
                        class="watchTable"
                        style="width: 100%">
                    <el-table-column
                            label="No."
                            type="index"
                            :index="indexMethod"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            property="cinemaName"
                            label="影院名称"
                            width="280"
                        >
                    </el-table-column>
                    <el-table-column
                            property="cinemaCode"
                            label="专资编码"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            property="workOrderEntity"
                            label="tms厅名"
                            width="200">
                            <template slot-scope="scope">
                                <span v-if="scope.row.workOrderEntity!=null">{{scope.row.workOrderEntity.hallName}}</span>
                                <span v-else>暂无</span>
                            </template>
                    </el-table-column>
                    <el-table-column
                            property="workOrderEntity"
                            label="故障设备"
                            width="200">
                             <template slot-scope="scope">
                                <span  v-if="scope.row.workOrderEntity!=null">{{scope.row.workOrderEntity.deviceName}}</span>
                                <span v-else>暂无</span>
                            </template>
                    </el-table-column>
                    <el-table-column
                            property="faultType"
                            label="故障类型"
                            width="200">
                            <template slot-scope="scope">
                                <span v-if="scope.row.faultType == 'break'">故障</span>
                                <span v-else-if="scope.row.faultType == 'warnning'">告警</span>

                            </template>
                    </el-table-column>
                    <el-table-column
                            property="createTime"
                            label="上报时间"
                            width="180">
                            <template slot-scope="scope">
                                <span v-if="scope.row.workOrderEntity!=null">{{dateFormat(scope.row.workOrderEntity.createTime)}}</span>
                           
                       </template>
                    </el-table-column>
                    <el-table-column
                            property="faultDetails"
                            label="故障详情"
                            >
                            <template slot-scope="scope" >
                                {{scope.row.faultDetails}}
                            </template>
                    </el-table-column>
                    <el-table-column
                            property="workOrderEntity"
                            label="对应工单">
                                <template slot-scope="scope"  :style="{color:getBackgtound(scope.row.state)}">
                                    {{getWorkOrderType(scope.row.state)}}
                            </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <!-- <a href="javascript:void(0)" @click="showDetail(scope.row)">查看工单</a> -->
                            <inner-button text="查看工单" @click="showDetail(scope.row)"></inner-button>
                        </template>
                    </el-table-column>
                </el-table>
                </div>
                <div v-if="activeName == 'second'">
                    <el-table
                       :data="data1"
                       v-loading.iTable="loading"
                       :stripe="true"
                       ref="mutipleTable"
                       :height="height"
                       :highlight-current-row="true"
                       border
                       tooltip-effect="dark"
                       class="watchTable"
                       style="width: 100%">
                   <el-table-column
                           label="No."
                           type="index"
                           :index="indexMethod"
                           width="50">
                   </el-table-column>
                   <el-table-column
                           property="nocCinemaName"
                           label="影院名称"
                           width="280"
                    >
                   </el-table-column>
                   <el-table-column
                           property="ecinemaCode"
                           label="专资编码"
                           width="200">
                   </el-table-column>
                   <el-table-column
                           property="ecat"
                           label="故障类型"
                           width="200">
                           <template slot-scope="scope">
                           {{scope.row.ecat}}
                       </template>
                   </el-table-column>
                   <el-table-column
                           property="ecreateTime"
                           label="上报时间" width="200">
                       <template slot-scope="scope">
                           {{dateFormat(scope.row.ecreateTime)}}
                       </template>
                   </el-table-column>
                  
                    <el-table-column
                           property="edescribe"
                           label="故障详情"
                           show-overflow-tooltip>
                           <template slot-scope="scope">
                               <span style="display: block;text-align: left;">
                                {{scope.row.edescribe}}
                               </span>
                            </template>
                   </el-table-column>
                  <el-table-column
                           property="estatusDesc "
                           label="TMS故障状态" width="200">
                       <template slot-scope="scope">
                           {{scope.row.estatusDesc }}
                       </template>
                   </el-table-column>
               </el-table>
                </div>
                <div class="paginationDiv">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="handleCurrentChange"
                            :current-page.sync="page"
                            :page-size="pageSize"
                            :total="total">
                    </el-pagination>
                </div>
               
            </layout>
           
        </layout>
         <el-dialog
                title=""
                :visible.sync="dialogVisibleAutoName" v-if="dialogVisibleAutoName" width="70%">
                <workoRderCreatDetails @dialogVisibleAutoClick="dialogVisibleAutoClick" :workoName="workoName"></workoRderCreatDetails>
        </el-dialog>
    </section>
</template>

<script lang="ts">
	import Vue from 'vue';
    import Component from 'vue-class-component';
    import Service from './troubleWatch.service';
    import {JSEncrypt} from 'jsencrypt';
    import base from '@/scrollLoad';
    import moment from 'moment';
    import formData from '@/views/form/form.vue';
    import workoRderCreatDetails from './troubleWatchDetails.vue';

    @Component({components:{
        formData,
        workoRderCreatDetails
    }})
    export default class troubleWatch extends Vue{
        height = 500;
        windowHeight = 700;
        loading = false;
        data = [];
        data1=[];
        onlyShowError = false;
        total = 0;
        page = 1;
        pageSize = 30;
        cinemaName = '';
        cinemaCode = '';
        activeName= 'first';
        state = '';
        workOrderType = '';
        startTime = '';
        endTime = '';
        listData='';
        list=''
        user10=false;
        timer=null;
        dialogVisibleAutoName=false;
        workoName={}
        conmonDisabled:boolean=false;
        constructor(){
            super();
            
        };
        dialogVisibleAutoClick() {
            this.dialogVisibleAutoName = false;
            if(this.user10) {
                this.deviceGetOleList()
            }else {
                this.searchList()
            }
        } 
         // 序号
        indexMethod(index) {
        return (this.page - 1) * this.pageSize + index + 1;
        }
        searchErrorList(){
            this.onlyShowError = true;
            if(this.activeName=='first') {
                this.searchList()
            } else if(this.activeName=='second') {
                this.malfunctionPage()
            }
        }
        
        searchAllList(){
            this.onlyShowError = false;
            if(this.activeName=='first') {
                this.searchList()
            } else if(this.activeName=='second') {
                this.malfunctionPage()
            }
        }
         getBackgtound(row) {
           if (row == 3) {
                return 'orange'
            } else if(row == 1) {
                return 'green';
            } else {
                return '#000'
            }
        }
        getWorkOrderType(row) {
        if(row == 1) {
            return '处理中 ';
        } else if (row == 2) {
            return '已处理  ';
        }else if (row ==3) {
            return '待响应  ';
        }else if (row == 4) {
            return '挂单';
        }else {
            return '未创单'
        }
    }
    getFaultDetails(row) {
        return row.faultDetails;
    }
        async searchList(){
            this.loading = true;
            let params = {
                pageNum: this.page,
                exception:this.onlyShowError,
                pageSize: this.pageSize,
                cinemaName: this.cinemaName,
                cinemaCode: this.cinemaCode,
                state:this.state,
                startTime:this.startTime==''? '' : moment(this.startTime).format('YYYY-MM-DD HH:mm:ss'),
                endTime:this.endTime==''? '' :moment(this.endTime).format('YYYY-MM-DD HH:mm:ss')
            }
            this.data = [];
            // this.total = 0;
            //console.log(this.page)
            await Service.malfunctionDevicePage(params).then(res=>{
                if(res.data.succeeded){
                    this.loading = false;
                    this.data = res.data.data;
                    this.total = res.data.totalRecords;
                    this.state=''
                    // this.page = 1
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
        }
        showDetail(row){
            if(row.workOrderEntity==null) {
                return this.$message({
                    message: '没有对应的工单详情',
                    type: 'warning'
                });
            }
            this.workoName = row
            this.dialogVisibleAutoName = true;
            // let params = {
            //         id: row.workOrderEntity.id
            //     };
            //     window.localStorage.setItem('workoRderCreatDetails',JSON.stringify(row.workOrderEntity))
            //     this.$router.push({
            //         path:'/watch/workoRderCreatDetails',
            //         name:'工单详情',
            //         params:params
            //     })
        }
        handleSizeChange(val) {
            this.pageSize = val;
             if(this.activeName=='first') {
                if(this.user10) {
                    this.deviceGetOleList()
                }else {
                    this.searchList()
                }
                
            } else if(this.activeName=='second') {
                this.malfunctionPage()
            }
        }
        handleCurrentChange(val) {
            //console.log(val)
            this.page = val;
            if(this.activeName=='first') {
                if(this.user10) {
                    this.deviceGetOleList()
                }else {
                    this.searchList()
                }
                
            } else if(this.activeName=='second') {
                this.malfunctionPage()
            }
            
            // this.malfunctionPage();
        }
        dateFormat(date){
            if(date!=null) {

                return moment(date).format("YYYY-MM-DD HH:mm:ss");
            } else {
                return ''
            }
        }

        resizeEvent(){
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
        }
        handleClick(tab, event) {
            //console.log(tab, event);
            this.conmonDisabled = false;
            this.height = this.windowHeight - 210;
            // this.page = 1
            this.cinemaName = '';
            this.cinemaCode=''
             this.startTime =''
            this.endTime = ''
            if(tab.name=='first') {
                if(this.user10) {
                    this.deviceGetOleList()
                }else {
                    this.searchList()
                }
            } else if(tab.name=='second') {
                this.malfunctionPage()
            }
        }
         deviceGetOleList() {
             let params = {
                pageNum: this.page,
                pageSize: this.pageSize,
                cinemaName: this.cinemaName,
                cinemaCode: this.cinemaCode,
                startTime:this.startTime==''? '' : moment(this.startTime).format('YYYY-MM-DD HH:mm:ss'),
                endTime:this.endTime==''? '' :moment(this.endTime).format('YYYY-MM-DD HH:mm:ss')
            }
             this.loading = true;
            Service.deviceGetOleList(params).then(res=>{
                if(res.data.succeeded){
                    if(res.data.succeeded){
                        this.loading = false;
                        this.data = res.data.data;
                        this.total = res.data.totalRecords;
                    }else{
                        this['$message']({
                            message: res.data.errorMessage,
                            type: 'error'
                        });
                    }
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
        }
        async malfunctionPage() {
            this.loading = true;
            this.data1 = []
             let params = {
                pageNum: this.page,
                pageSize: this.pageSize,
                exception:this.onlyShowError,
                cinemaName: this.cinemaName,
                cinemaCode: this.cinemaCode,
                startTime:this.startTime==''? '' : moment(this.startTime).format('YYYY-MM-DD HH:mm:ss'),
                endTime:this.endTime==''? '' :moment(this.endTime).format('YYYY-MM-DD HH:mm:ss')
            }
            this.state='';
            await Service.malfunctionPage(params).then(res=>{
                if(res.data.succeeded){
                    this.loading = false;
                    this.data1 = res.data.data;
                    this.total = res.data.totalRecords;
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
        }
        getShanxuan() {
            // debugger
            this.$refs.componentChild.getShow();
            this.conmonDisabled = true;
            if(this.activeName =='first') {
                this.list = 'trouble'
            } else {
                this.list = ''
            }
            this.listData = 'trouble'
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210 - 95;
        }
        condition(data) {
            //console.log(data)
            this.page = 1
            this.cinemaName = data.user
            this.cinemaCode = data.user1
            this.state = data.user3
            this.workOrderType = data.user3
            this.startTime =data.user4.length==0?'':moment(data.user4[0]).format('YYYY-MM-DD HH:mm:ss')
            this.endTime = data.user4.length==0?'':moment(data.user4[1]).format('YYYY-MM-DD HH:mm:ss')
            this.user10 = data.user10
            if(this.activeName=='first') {
                if(data.user10) {
                    this.data = []
                    this.deviceGetOleList()
                }else {
                    this.searchList()
                }
            } else if(this.activeName=='second') {
                this.malfunctionPage()
            }

            // this.windowHeight = document.documentElement.clientHeight;
            // this.height = this.windowHeight - 210 + 80;
        }
       
        conmonDisabledNone(conmonDisabled) {
            this.page = 1
            this.conmonDisabled = false;
            this.cinemaName = conmonDisabled.user;
            this.cinemaCode = conmonDisabled.user1;
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
            this.startTime =''
            this.endTime = ''
            this.user10 = conmonDisabled.user10
            if(this.activeName=='first') {
                this.searchList()
            } else if(this.activeName=='second') {
                this.malfunctionPage()
            }
        }
        created(){
            const me = this;
            this.resizeEvent();
            // this.searchList();
            window.onresize = () => {
                return (() => {
                    me.resizeEvent();
                })()
            };
        };
        mounted(){   
            //  this.timer = setInterval(() => {
            //     this.searchList();
            // }, 30000);
    
            // me.$nextTick(()=>{
            //     me.getBaiduMap().then(BMap => {
            //         me.showMap()
            //     })
            // })
            //console.log(this.$route.params.row)
            if(this.$route.params.row!=undefined) {
                this.cinemaName = this.$route.params.row.cinemaNameCn
                this.cinemaCode = this.$route.params.row.cinemaCode
            }
            //console.log(this.cinemaName)
            this.searchList();
        };
        beforeDestroy() {
            clearInterval(this.timer);
            this.timer = null;
        };
        deactivated() {
            clearInterval(this.timer);
            this.timer = null;
        };
        
    }
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';
   /deep/.el-tabs--card>.el-tabs__header {
       border: none;
   }
   /deep/.el-tabs__item {
       padding: 0 20px;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    flex-basis: 100%;
    position: relative;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    height: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: fit-content;
    color: rgb(22, 132, 252);
   }
   /deep/.is-active {
    font-size: 14px;
    color: rgb(255, 255, 255);
    background-color: rgb(22, 132, 252);
    // border-radius: 50px;
   }
   /deep/ #tab-first {
        border-radius: 50px 0 0 50px;
   }
   /deep/ #tab-second {
       border-radius: 0 50px 50px 0 ;
   }
   /deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav{
       border-radius: 50px;
   }
   /deep/ .el-container {
       position: relative;
   }
   /deep/ .el-tabs {
        top: 13px;
        position: absolute;
        left: 42%;
        transition: auto;
   }
</style>